<template>
	<view>
		<view class="index-content" style="position: fixed;height: 225px;left:0;top:0;right:0">
			<view class="video video-content" v-if="current_type === 1">
				<view class="video-sp">
					<aliPlayer style="width:100%;" :source="current_file" ref="telText" :autoplay="true"></aliPlayer>
				</view>
			</view>
			<view class="video video-content" v-if="current_type === 3" style="padding: 13px 0;background: #f1f1f1;" >
					<zaudio :info="audiolist" @transferUser="translateText" @transferUser1="translateText1" ref='child'></zaudio>
			</view>
			<view class="video video-content" v-if="current_type === 2" style="overflow: hidden;">
				<img :src="courseInfo.cover" style="width: 100%;height: auto"/>
			</view>
		</view>
		<view class="video-jieshao" style="top: 225px;position: fixed;left: 0;right: 0;bottom: 0;">
			<view class="login-title">
				<block v-for="(item,index) in order_sort" :key="index">
					<view  @click="changeTab(index)"
						   :class="current_index == index ? 'login-title-active' : 'login-title-other' ">{{item.name}}</view>
				</block>
			</view>

			<view class="video-jieshao-content" style="overflow-y: auto;height: 100vh;margin-bottom: 47px;">
				<view style="width: 100%;background: #fff">
				<view class="video-content-title" v-if="current_index == 0">
					<view class="video-content-flex">
						<view class="video-content-h1">{{courseInfo.title}}</view>
						<view class="video-content-detail">
							<view class="video-content-detail-flex">
								<view class="video-content-detail-price video-content-detail-free" v-if="courseInfo.price==0.00">免费</view>
								<view class="video-content-detail-price" v-else>￥{{courseInfo.price}}</view>
								<view class="video-content-detail-r" v-if="courseInfo.price!=0.00">
									<view v-if="courseInfo.vip_price==0.00" style="color: #ff4a4a">免费</view>
									<view v-else>￥{{courseInfo.vip_price}}</view>
									<image class="video-content-detail-img" :src="static_media.img01"></image>
								</view>
							</view>
							<view class="video-content-about video-jieshao-list-active">已有{{courseInfo.study_count}}人学习</view>
						</view>

					</view>
				</view>
					<view class="video-content-jieshao" v-if="current_index == 0">
						<view class="video-content-jieshao-title">授课老师</view>
						<view class="about-flex" @tap="goto_teach_detail(teacher_id)">
							<view class="teach">
								<image class="teach-img" :src="courseInfo.teacher.image"></image>
								<view class="teach-flex">
									<view class="teach-flex-title">{{courseInfo.teacher.name}}</view>
									<view class="teach-about">共{{courseInfo.course_count}}课时</view>
								</view>
							</view>
							<view class="icon icon-arrow"></view>
						</view>
					</view>
					<view class="video-content-jieshao" v-if="current_index == 0">
						<view class="video-content-jieshao-title">课程介绍</view>
						<uParse :content="courseInfo.content" />
					</view>
				</view>
				<view v-if="current_index == 1" style="width: 100%;background: #fff;position: relative;">
				<view class="video-mulu" v-for="(item,index) in courseList" :key="index">
					<view class="video-jieshao-list-top">
						<view class="video-jieshao-list-top-title">{{item.unit_name}}</view>
						<view class="video-content-about"><view>共{{item.course.length}}节</view></view>
					</view>
					<view class="video-jieshao-list-flex">
						<view class="video-jieshao-list" v-for="(ite,ind) in item.course" :key="ind">
							<view class="video-jieshao-zlist" :class="ite.is_last == 1 ? 'video-jieshao-active' : ''" @click="playVideo(ite.id,ite.id,ite.course_id,ite.type,ite.title,ite.url,ind,index)">
								<view class="video-jieshao-list-l">
									<view class="video-content-type" v-if="ite.type==1" :class="ite.is_last == 1 ? 'video-content-type-active' : (ite.study_status !== 0 ? 'video-content-type-active-k' : '')">视频</view>
									<view class="video-content-type" v-if="ite.type==2" :class="ite.is_last == 1 ? 'video-content-type-active' : (ite.study_status !== 0 ? 'video-content-type-active-k' : '')">图文</view>
									<view class="video-content-type" v-if="ite.type==3" :class="ite.is_last == 1 ? 'video-content-type-active' : (ite.study_status !== 0 ? 'video-content-type-active-k' : '')">音频</view>
									<view class="video-jieshao-list-title" :class="ite.is_last == 1 ? 'video-jieshao-list-active' : (ite.study_status !== 0 ? 'video-jieshao-list-k' : '')">{{ite.title}}</view>
								</view>
								<view class="video-time" v-if="ite.type!=2" :class="ite.is_last == 1 ? 'video-jieshao-list-active' : (ite.study_status !== 0 ? 'video-jieshao-list-k' : '')">{{ite.duration}}</view>
							</view>
						</view>
					</view>
				</view>
				</view>
			</view>
			<view class="test-bottom">
				<view class="test-bottom-flex" @tap="collect_opt">
					<view class="icon" :class="{'icon-shoucang': shoucang != 1, 'icon-shoucang1': shoucang == 1}"></view>
					<view>{{ shoucang == 1 ? '已收藏' : '收藏'}}</view>
				</view>
				<view class="test-bottom-flex" @tap="goto_detail()">
					<view class="icon icon-share"></view>
					<view>分享</view>
				</view>
				<view v-if="courseInfo.is_buy == 1" class="test-bottom-flex test-bottom-r">
					<view>已购买</view>
				</view>
				<view v-if="(this.courseInfo.is_buy == '0' && this.courseInfo.is_vip == '0' && this.courseInfo.price !== '0.00') ||  (this.courseInfo.is_buy == 0 && this.courseInfo.is_vip == 1 && this.courseInfo.vip_price !== '0.00')" class="test-bottom-flex test-bottom-r" @tap="pay()">
					<view v-if="courseInfo.is_vip==0">￥{{courseInfo.price}}</view>
					<view v-else>￥{{courseInfo.vip_price}}</view>
				</view>
				</view>
		</view>
		<right-menu></right-menu>
	</view>
</template>
<script>
	import { mapState } from "vuex";
	import uParse from '@/components/uParse/src/wxParse.vue'
	import zaudio from '@/components/audio/zaudio';
	import rightMenu from '@/components/right-menu';
	import aliPlayer from '@/components/aliPlayer/aliPlayer.vue'
	import util from '@/lib/utils/index.js'
	let jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				content_id:'',
				pages_params: {},
				order_sort: [{
							name: '介绍',
							type: '1'
						},{
							name: '目录',
							type: '2'
						}],
				current_id: '1',
				current_index: 1,
				show_modal: false,
				teacher_id: 0,
				courseList: [],
				video_detail: {},
				courseInfo: {},
				video_file_list: [],
				current_file: '',//视频type
				current_last_duration: '',//视频看到哪了
				play_video_id: '',//视频id
				play_time: '',
				Progress: '',//视频的定时器秒
				currentPaused: '',
				current_type: 2,//type
				current: '',//视频
				audiolist: {},//音频
				play_video_title: '',//音频title
				shoucang:'',//收藏

				active_ind:0,
				active_index:0,

			}
		},
		mounted() {

		},
		computed: {
			...mapState(['userInfo','appId']),
			static_media () {
				return {
					img01: this.$lib.$config.localMedia + '/static/img/vip-price.png',
				}
			},
		},
		components: {
			uParse,zaudio,rightMenu,aliPlayer
		},
		onLoad(opts) {
			// 标记来源
			this.pages_params = opts;
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			// this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onShow() {
			this.getVideoList();
		},
		beforeDestroy() {
			if (this.videoContext) {
				this.videoContext.stop();
			}
			if (this.$refs.child) {
				this.$refs.child.stop();
			}
		},
		onHide() {
			if (this.videoContext) {
				this.videoContext.stop();
			}
			if (this.$refs.child) {
				this.$refs.child.stop();
			}
		},
		methods: {
			async pay(){
				let that = this
				uni.showLoading({
						title: '加载中'
					});
					let res = await that.$lib.$http.post({
						url:that.$lib.$urlMap.coursePay,
						data:{
							id:that.pages_params.id
						},
						needLogin: true
					})
					if(res.code == 1){
						uni.hideLoading();
						let data = res.data
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: that.appId, // 必填，公众号的唯一标识
							// appId: 'wxb96be8827fb270a5', // 必填，公众号的唯一标识
							timestamp: data.timestamp, // 必填，生成签名的时间戳
							nonceStr: data.nonceStr, // 必填，生成签名的随机串
							signature: data.paySign, // 必填，签名
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
						});
						jweixin.ready(function() {
				
							// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
							jweixin.chooseWXPay({
								appid: that.appId,
								timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
								nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
								package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
								signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
								paySign: data.paySign, // 支付签名
								success: function(res) {
									// alert(res)
									// 支付成功后的回调函数
									uni.showToast({
										icon: 'success',
										title: '支付成功'
									})
									that.courseInfo.is_buy = 1
									that.current_id = '1'
									that.current_index = 1
								},
								fail:function (err) {
									// alert(err)
									uni.showToast({
										icon: 'none',
										title: (err),
										duration: 1000
									});
								}
							});
						});
					}else{
						uni.hideLoading();
						uni.showModal({
						    title: '提示',
						    content: res.msg,
							showCancel:false,
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
			},
			async getVideoList() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.courseInfo,
					data: {
						id: this.pages_params.id
					},
					needLogin: true
				})
				if (res.code == 1) {
					this.courseInfo = res.data
					this.teacher_id = res.data.teacher.id
					this.courseInfo.createtime = util.formatDate(this.courseInfo.createtime * 1000, 'Y年M月D日 h:m:s')

					this.shoucang = this.courseInfo.is_fav
					this.courseList = res.data.unit
					let data = res.data.unit
					for (let i = 0, leng = data.length; i < leng; i++) {
						let course = data[i].course
						for (let j = 0, leng = course.length; j < leng; j++) {
							course[j].duration = util.SecondToDate(course[j].duration)
							if(course[j].is_last == 1){
								this.active_index = i
								this.active_ind = j
							}
						}
					}
					if((this.courseInfo.is_buy == '0' && this.courseInfo.is_vip == '0' && this.courseInfo.price !== '0.00') ||  (this.courseInfo.is_buy == 0 && this.courseInfo.is_vip == 1 && this.courseInfo.vip_price !== '0.00')){
						this.current_id = '0'
						this.current_index = 0
					}
				}
			},
			// 收藏
			async collect_opt() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.fav,
					data: {
						id: this.pages_params.id
					},
					needLogin: true
				});
				if (res.code == 1) {
					this.course_fav = res.data
					this.shoucang = this.course_fav.is_fav
				}
			},
			translateText(msg){
				this.current = msg
			},
			translateText1(msg){
				this.current = msg
			},
			changeTab(index) {
				this.current_index = index
			},
			async playVideo(videoId,id,courseid,type,title,iteurl,ind,index) {
				if((this.courseInfo.is_buy == '0' && this.courseInfo.is_vip == '0' && this.courseInfo.price !== '0.00') ||  (this.courseInfo.is_buy == 0 && this.courseInfo.is_vip == 1 && this.courseInfo.vip_price !== '0.00')){
					uni.showToast({
						icon: 'none',
						title: '请购买课程'
					})
					return
				}
				//修改正在播放和已经播放过的样式
				this.$set(this.courseList[this.active_index].course[this.active_ind],'study_status',1)
				this.$set(this.courseList[this.active_index].course[this.active_ind],'is_last',0)
				this.active_index = index
				this.active_ind = ind
				this.$set(this.courseList[this.active_index].course[this.active_ind],'is_last',1)
				//图文
				if(type == 2){
					if(this.Progress && this.Progress >= 0){
						this.pause();
					}
					if(this.$refs.child && this.$refs.child.bo()){
						this.$refs.child.stop();
					}
					uni.navigateTo({
						url: '/pages/index/text?id=' + id + '&course_id=' + courseid
					})
					//音频
				}else if(type == 3){
					let res = await this.$lib.$http.post({
						url: this.$lib.$urlMap.videoUrl,
						data: {
							id: videoId,
						},
						needLogin: true
					});

					if(this.Progress && this.Progress > 0){
						this.pause();
					}
					if (res.code === 1) {
						this.video_detail = res.data;
						this.play_video_title=title
						this.audiolist = {
							src: this.video_detail.PlayURL,
							title: title,
							coverImgUrl: this.$lib.$config.localMedia + '/static/img/logo-music.jpg'
						};
						this.current_type = type;
						this.play_video_id=id
					}
					//视频
				}else if(type == 1){
					let res = await this.$lib.$http.post({
						url: this.$lib.$urlMap.videoUrl,
						data: {
							id: videoId,
						},
						needLogin: true
					});

					if(this.$refs.child && this.$refs.child.bo()){
						this.$refs.child.stop();
					}
					if (res.code === 1) {
						this.currentPaused = false
						this.video_detail = res.data;
						this.current_file = this.video_detail.PlayURL;
						this.current_type = type;
						
						this.play_video_id=id;
					}
				}

			},

			goto_detail () {
				uni.navigateTo({
					url: '/pages/share/index?id=' + this.courseInfo.id
				})
			},
			goto_teach_detail (teacher_id) {
				uni.navigateTo({
					url: '/pages/index/teachDetail?id=' + teacher_id
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f6f7f9;
	}

	.lz-top_view {
		background-color: #fff;
	}

	.index-head-top .index-head-l .icon {
		padding-left: 4px;
		font-size: 20px;
	}

	.index-banner img {
		width: 100%;
		height: 160px;
		border-radius: 10px 10px 0 0;
	}

	.index-nav img {
		width: 40px;
		height: 40px;
	}

	.index-content {
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.index-box img {
		width: 166px;
		height: 61px;
		margin-right: 8px;
	}

	.user-top-remind-notic .icon {
		font-size: 23px;
		color: #367ef0;
		padding-left: 13px;
		padding-right: 4px;
	}

	.video {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
		background: #fff;
		border-radius: 7px;
		font-size: 14px;
		margin-bottom: 20px;
	}

	.video .icon {
		color: #fff;
		width: 43px;
		border-radius: 50%;
		font-size: 24px;
		height: 43px;
		line-height: 43px;
		margin-bottom: 4px;
	}

	/*课程列表*/
	.video-content {
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
		padding-top: 0;
		border-radius: 0;
	}
	.video-content-type{
		font-size: 13px;
		padding: 2px 5px;
		border: solid 1px #797979;
		margin-right: 5px;
		border-radius: 2px;
		color: #797979;
	}
	.video-content-type-active{
		font-size: 13px;
		padding: 1px 5px;
		border: solid 1px #4d72ff!important;
		margin-right: 5px;
		border-radius: 2px;
		color: #4d72ff!important;
	}
	.video-content-type-active-k{
		border: solid 1px #d8d8d8;
		color: #d8d8d8
	}
	.video-jieshao-list-title {
		color: #5e5e5e;
		font-size: 13px;
		flex: 1;
		margin-right: 6px;
	}
	.video-jieshao-list-k{
		color: #d8d8d8;
	}
	.video-content-title {
		width: 92%;
		margin: 14px auto;
		background: #fff;
	}

	.video-content-jieshao {
		width: 100%;
		padding: 14px;
		border-top: solid 10px #f6f7f9;
	}
	.video-content-jiangyi {
		width: 100%;
		padding: 14px 0 3px;
		background: #fff;
	}
	.video-content-jiangyi-title{
		font-size: 15px;
		margin-left: 14px;
	}
	.video-jieshao-list-l .icon-xiazai{
		font-size: 18px!important;
	}
	.video-content-flex {
		display: flex;
		flex-direction: column;
		align-items: baseline;
	}

	.video-content-h1 {
		color: #000;
		font-size: 16px;
		padding-bottom: 6px;
	}

	.video-content-about {
		font-size: 14px;
		color: #bdbdbd;
		display: flex;
		align-items: center;
	}

	.video-content-learn {
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
	}

	.video-content-price {
		font-weight: bold;
		color: #4d72ff;
		font-size: 20px;
	}

	.video-sp {
		background: #000;
		width: 100%;
		position: relative;
	}

	.video-sp .icon {
		position: fixed;
		left: 6px;
		top: 12px;
		z-index: 111100000;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		color: #fff;
		font-size: 22px;
		line-height: 28px;
	}
	.video-jieshao {
		display: flex;
		flex-direction: column;
	}

	.video-jieshao-title {
		padding: 14px;
		font-size: 18px;
	}

	.video-jieshao-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		margin-bottom: 58px;
	}

	.video-jieshao-content img {
		width: 100%;
	}

	.video-time {
		color: #d8d8d8;
		flex: 0 0 40px;
		text-align: right;
		font-size: 13px;
	}

	/*底部*/
	.video-pay {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: space-between;
		font-size: 16px;
	}

	.video-pay-flex {
		display: flex;
		align-items: center;
		font-size: 14px;
		padding: 14px 12px;
		flex: 1;
		border-top: solid 1px #f5f5f5;
	}

	.video-pay-price {
		font-weight: bold;
		color: #4d72ff;
		font-size: 20px;
	}

	.video-pay-price {
		font-weight: bold;
		color: #4d72ff;
		font-size: 20px;
	}

	.video-pay-r {
		color: #b1b1b1;
		padding-left: 8px;
	}

	.video-pay-button {
		background: #4d72ff;
		color: #fff;
		line-height: 56px;
		padding: 0 26px;
		font-size: 16px;
	}

	.login-title {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		font-size: 16px;
		border-bottom: solid 1px #f5f5f5;
		padding:0 10px;
		background: #fff;
	}
	.login-title-active {
		text-align: center;
		color: #000;
		font-weight: bold;
		border-bottom: solid 2px #4d72ff;
		padding: 10px 15px;
		flex: 1;
	}

	.login-title-active .line {
		background: #4d72ff;
		width: 102px;
		height: 2px;
		margin: 0 auto
	}

	.login-title-other {
		text-align: center;
		flex: 1;
		color: #c7c7c7;
		padding: 10px 15px;
	}

	.video-jieshao-list-top {
		width: 92%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: column;
		margin: 0 auto;
		padding: 7px 0 1px;
	}

	.video-jieshao-list-top-title {
		font-size: 16px;
		margin-bottom: 2px;
	}
	.video-jieshao-list {
		width: 92%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		padding: 10px 0;
	}
	.video-jieshao-list-flex .video-jieshao-list{
		border-bottom: dashed 1px #f7f7f7;
	}
	.video-jieshao-list-flex .video-jieshao-list:last-child{
		border-bottom:none;
	}
	.video-jieshao-zlist {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.video-jieshao-list-active{
		color: #4d72ff!important;
	}

	.video-jieshao-list .active {
		color: #4d72ff
	}

	.video-jieshao-list .icon-active {
		color: #4d72ff !important;
	}

	.video-jieshao-list-l {
		display: flex;
		align-items: center;
	}

	.video-jieshao-list-l .icon {
		color: #d6d6d6;
		padding-right: 6px;
		font-size: 14px;
	}

	.video-mulu {
		width: 100%;
		padding: 4px 0 9px;
		border-bottom: solid 1px #f7f7f7;
	}

	.video-mulu-sc {
		width: 65px;
		height: 26px;
		font-size: 12px;
		line-height: 26px;
		color: #fff;
		background: #4d72ff;
		text-align: center;
		border-radius: 16px 16px 16px 0;
		margin-left: 7px;
	}

	.video-content-jieshao-title {
		font-size: 16px;
	}

	.video-content-jieshao-content {
		padding: 4px 0;
		line-height: 20px;
	}
	.lz-icon-close{
		font-size: 20px;
		color: #7d7d7d;
	}
	.lz-title{
		flex: 1;
		text-align: center;
		font-size: 17px;
	}
	.jy-flex{
		display: flex;
		align-items: center;
		padding: 19px;
		justify-content: center;
	}
	.jy-title{
		width: 72%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.jy-button{
		font-size: 12px;
		background: #4d72ff;
		color: #fff;
		padding: 5px 7px;
		border-radius: 4px;
	}
	.test-bottom{
		position: fixed;
		bottom: 0;
		right: 0;
		background: #fff;
		color: #232323;
		padding: 4px;
		border-top: solid 1px #efefef;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 14px;
		justify-content: center;
	}
	.test-bottom-flex{
		display: flex;
		align-items: center;
		padding: 8px 10px;
		flex: 1;
		justify-content: center;
		border-right: solid 1px #f5f5f5;
	}
	.test-bottom .test-bottom-flex:nth-child(2){border-right:none}
	.test-bottom .icon{
		font-size: 18px;
		margin-right: 4px;
	}
	.test-bottom .icon-shoucang1{
		color: #ffe838;
	}
	.about-flex {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-between;
	}
	.video-jieshao-active .video-content-type-active-k{
		border: solid 1px #4d72ff;
     	color: #4d72ff;
	}
	.video-jieshao-active .video-jieshao-list-title{
		color: #4d72ff;
	}
	.teach{
		display: flex;
		align-items: center;
		flex: 1;
		margin-top: 13px;
	}
	.teach-img{
		width: 56px;
		height: 56px;
		border-radius: 50%;
	}
	.teach-flex{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		height: 52px;
		justify-content: space-between;
		margin-left: 12px;
		color: #4c4c4c;
	}
	.teach-flex-title{
		font-size: 16px;
		font-weight: bold;
	}
	.teach-about{
		color: #9c9c9c;
	}
	.about-flex .icon-arrow{
		color: #ccc;
		font-size: 14px;
	}
	.test-bottom-r{
		font-size: 16px;
		background: #4d72ff;
		color: #fff;
		padding: 11px 58px;
		border-radius: 25px;
	}

	.video-content-detail{
		justify-content: space-between;
	}
	
	.prism-big-play-btn{
	    position: absolute;
	    left: 40%;
	    bottom: 44%;
	    display: block;
	}
</style>